<template>
  <div class="box">
    <div class="main-box">
      <div>
        <tdMap style="height: 600px" class="mapBox_right" ref="tdMap" :pkList="mainDataData" :isShowControls="false" />
      </div>
      <div class="basicInfo_content">
        <div class="first_box">
          <div class="select_bxo">
            <div>公示时间</div>
            <el-date-picker
              v-model="needInfo1.time"
              value-format="yyyy-MM-dd"
              type="date"
              @blur="getSupervising"
              class="time"
              placeholder="选择日期"
            ></el-date-picker>
            <el-button type="primary" @click="search">查询</el-button>
          </div>
        </div>
        <el-table :data="infoList" border>
          <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column show-overflow-tooltip prop="place" label="位置信息"></el-table-column>
          <el-table-column show-overflow-tooltip prop="time" label="公示时间"></el-table-column>
          <el-table-column label="定位" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="btn_see(scope.row)">定位</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page_class">
          <el-pagination
            @current-change="showPage2"
            :current-page.sync="needInfo1.page"
            :page-size="needInfo1.size"
            layout="prev, pager, next, jumper"
            :total="totalPage2"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- <div class="landInfo">
      <div class="project_position">
        <div class="project_title">项目告知照片</div>
        <div class="project_img">
          <el-table :data="imgArr" border style="width: 100%">
            <el-table-column type="index" show-overflow-tooltip label="序号" width="60"></el-table-column>
            <el-table-column prop="name" label="现场照片" width="200"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  fixed="left"
                  @click="btnSeeImg(scope.row.filePath,scope.row.name)"
                >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div> -->

    <el-dialog :title="title" :visible.sync="seeImgDialog" width="50%">
      <div class="seeImg">
        <img :src="$https+imgPath" width="80%" height="500" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import xTable from "@/views/xtable.vue";
import {
  supervising,
  superviseCheck,
  getLandStatusMapAuditInfo,
  superviseCheckPhoto
} from "@/api/xmgz";
import tdMap from "@/components/tdMap";
export default {
  components: {
    tdMap
  },
  data() {
    return {
      activeName: "first",
      input: "",
      power: "",
      currentPage4: 4,
      needInfo: {
        page: 1,
        size: 10,
        name: "",
        time: ""
      },
      needInfo1: {
        page: 1,
        size: 10,
        photo: "",
        time: ""
      },
      infoList: [],
      infoList1: [],
      totalPage1: 0,
      totalPage2: 0,
      publicTime: "",
      seeImgDialog: false,
      rowsInfo: "",
      imgArr: [],
      imgPath: "",
      title: "",
      itemData: {
        place: "",
        time: ""
      },
      mainDataData: [],
      photoData: []
    };
  },
  created() {
    this.getSupervising();
  },
  methods: {
    btnSeeImg(imgPath, title) {
      this.title = title;
      this.imgPath = imgPath;
      this.seeImgDialog = true;
    },
    btn_see(info) {
      this.rowsInfo = info;
      var data = {
        landId: info.landId
      };
      getLandStatusMapAuditInfo(data).then(res => {
        var obj = res.data;
        var array = [];
        array.push(obj);
        this.mainDataData = array;
      });
      this.getSupervising1(info.photo);
    },
    search() {
      this.getSupervising();
    },
    getSupervising() {
      //项目告知
      var data = this.needInfo;
      data["projectId"] = localStorage.getItem("projectId");
      supervising(data).then(res => {
        res.data.rows.forEach(item => {
          if (item.time != null) {
            item.time = this.getTime(item.time);
          }
        });
        this.infoList = res.data.rows;
        if (this.infoList != null && this.infoList.length != 0) {
          this.needInfo1.photo = this.infoList[0].photo;
          this.itemData.place = this.infoList[0].place;
          this.itemData.time = this.infoList[0].time;
        }
        this.totalPage2 = res.data.total;
      });
    },
    getSupervising1(photo) {
      var data = {
        page: 1,
        size: 99999,
        photo: photo
      };
      superviseCheck(data).then(res => {
        var arr = [];
        res.data.rows.forEach((item, index) => {
          item["name"] = "告知现场照片" + (index + 1);
          item["place"] = this.itemData.place;
          item["time"] = this.itemData.time;
        });
        this.imgArr = res.data.rows;
      });
    },
    getTime(time) {
      let times = new Date(time);
      let year = times.getFullYear();
      let month =
        times.getMonth() + 1 < 10
          ? "0" + (times.getMonth() + 1)
          : times.getMonth() + 1;
      let day = times.getDate() < 10 ? "0" + times.getDate() : times.getDate();
      let hours =
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours();
      let minutes =
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes();
      let seconds =
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds();
      time =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      return time;
    },
    showPage1(val) {
      this.needInfo.page = val;
      this.getSupervising();
    },
    showPage2(val) {
      this.needInfo1.page = val;
      this.getSupervising1();
    },
    handleClick(tab, event) {
      if (this.activeName == "second") {
        this.needInfo1.page = 1;
        this.getSupervising1();
      } else {
        this.needInfo.page = 1;
        this.getSupervising();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.map-container{
  margin-bottom: 0;
}
/deep/ .map-right{
  height: calc(100vh - 154px);
}
.mapBox_right {
  width: 100%;
}
.seeImg {
  text-align: center;
}
.landInfo {
  border: 1px solid #efefef;
  box-sizing: border-box;
}

.back {
  margin: 20px;
}
.title {
  .title_one {
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: #444;
    font-weight: bold;
  }
  .title_little {
    font-size: 13px;
    color: #999;
    margin: 40px 20px 20px 30px;
    span {
      margin-right: 30px;
    }
  }
}
.project_title {
  background: #f8f8f8;
  height: 50px;
  background: #f8f8f8;
  padding: 0px 30px;
  line-height: 50px;
  color: #48494d;
  font-size: 14px;
  font-weight: bold;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.project_img {
  padding: 30px;
}
.box {
  padding: 0 40px;
  background: #fff;
  .first_box {
    padding: 20px 0;
    .select_bxo {
      display: flex;
      align-items: center;
      div {
        font-size: 14px;
        color: #444;
      }
      .input {
        width: 200px;
        margin: 0px 20px 0px 20px;
      }
      .time {
        margin: 0px 20px 0px 20px;
      }
    }
  }
  .page_class {
    margin-top: 20px;
    text-align: center;
  }
}

.main-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  & > div {
    width: 49%;
  }
}
</style>
